<template>
  <div>
    <div
      style="
        width: 100%;
        height: 60px;
        background-color: blueviolet;
        margin-top: 10px;
      "
    >
      <el-card
        :body-style="{ padding: '0px' }"
        style="
          width: 100%;
          height: 100%;
          display: flex;
          align-items: center;
          justify-content: space-between;
        "
      >
        <el-input
          v-model="searchData"
          style="width: 200px; margin-left: 10px"
          placeholder="请输入模块名"
          clearable
        ></el-input>
        <el-button style="margin-left: 10px" @click="search">搜索</el-button>
        <el-button style="margin-left: 10px" @click="reset">重置</el-button>
        <el-button
          style="margin-left: 10px"
          type="danger"
          @click="BatchDelete(tableChecked)"
          >批量删除</el-button
        >
      </el-card>
    </div>
    <div style="margin-top: 10px">
      <el-table
        :data="tableData"
        stripe
        :header-cell-style="{ backgroundColor: 'aliceblue', color: '#666' }"
        @selection-change="handleSelectionChange"
      >
        <el-table-column
          type="selection"
          width="55"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="id"
          label="序号"
          width="70"
          align="center"
        ></el-table-column>
        <el-table-column prop="operation" label="操作模块"></el-table-column>
        <el-table-column prop="type" label="操作类型">
          <template v-slot="scope">
            <el-tag type="primary" v-if="scope.row.type === '新增'">{{
              scope.row.type
            }}</el-tag>
            <el-tag type="info" v-if="scope.row.type === '修改'">{{
              scope.row.type
            }}</el-tag>
            <el-tag type="danger" v-if="scope.row.type === '删除'">{{
              scope.row.type
            }}</el-tag>
            <el-tag type="danger" v-if="scope.row.type === '批量删除'">{{
              scope.row.type
            }}</el-tag>
            <el-tag type="success" v-if="scope.row.type === '登录'">{{
              scope.row.type
            }}</el-tag>
            <el-tag type="success" v-if="scope.row.type === '注册'">{{
              scope.row.type
            }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="ip" label="操作人IP"></el-table-column>
        <el-table-column prop="user" label="操作人"></el-table-column>
        <el-table-column prop="time" label="操作时间"></el-table-column>
        <el-table-column label="操作" align="center" width="180">
          <template v-slot="scope">
            <el-button
              size="mini"
              type="danger"
              plain
              @click="del(scope.row.id)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <div style="margin: 10px 0">
        <el-pagination
          background
          layout="prev, pager, next"
          :page-size="limit"
          :total="totalCount"
          :current-page="currentPage"
          @current-change="pageChange"
        />
      </div>
    </div>
  </div>
</template>

<script setup>
import { deleteBatchLogs, deleteLogsData, getLogs } from "@/api/Logs";
import { ref } from "vue";
//当前页面
let currentPage = ref(1);
// 总条数
let totalCount = ref(0);
// 每页显示限制
let limit = ref(10);
const tableData = ref([]);
const searchData = ref("");
//查询数据
const logsData = ref({
  operation: "",
  pageNum: currentPage.value,
  pageSize: limit.value,
});
const showLogsData = async () => {
  const res = await getLogs(logsData.value);
  if (res.code === 200) {
    tableData.value = res.data.list;
    totalCount.value = res.data.totalCount;
  }
};
showLogsData();

const search = async () => {
  logsData.value.operation = searchData.value;
  const res = await getLogs(logsData.value);
  if (res.code === 200) {
    tableData.value = res.data.list;
    totalCount.value = res.data.totalCount;
  }
  console.log(logsData.value);
  console.log(res);
};
const reset = () => {
  searchData.value = "";
  logsData.value.operation = "";
  showLogsData();
};
const tableChecked = ref([]);
const handleSelectionChange = (val) => {
  // console.log(val)
  tableChecked.value = val;
};
// const ids = ref([])
const BatchDelete = async (tableChecked) => {
  // console.log("批量删除");
  const arr = new Array();
  tableChecked.forEach((item) => {
    arr.push(item.id);
  });
  // console.log(ids);
  const ids = arr.join(",");
  // 调用删除函数并处理返回值
  if (tableChecked.length == 0) {
    ElMessage.warning("当前未勾选文件");
  } else {
    ElMessageBox.confirm("确定要删除吗？", "警告", {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning",
      lockScroll: false, // 防止抖动
    })
      .then(async () => {
        const res = await deleteBatchLogs(ids);
        //  console.log("data数据"+res.data)
        if (res.code == 200) {
          ElMessage({
            showClose: true,
            message: "删除成功",
            type: "success",
          });
          // showList()
          // showPage()
          showLogsData();
        } else {
          ElMessage({
            showClose: true,
            message: res.data.msg,
            type: "error",
          });
        }
      })
      .catch(() => {
        ElMessage({
          type: "info",
          message: "取消删除",
        });
      });
  }
};
const del = async (id) => {
  ElMessageBox.confirm("确定要删除吗？", "警告", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
    lockScroll: false, // 防止抖动
  })
    .then(async () => {
      const res = await deleteLogsData(id);
      //  console.log("data数据"+res.data)
      if (res.code == 200) {
        ElMessage({
          showClose: true,
          message: "删除成功",
          type: "success",
        });
        // showList()
        // showPage()
        showLogsData();
      } else {
        ElMessage({
          showClose: true,
          message: res.data.msg,
          type: "error",
        });
      }
    })
    .catch(() => {
      ElMessage({
        type: "info",
        message: "取消删除",
      });
    });
  showLogsData();
};
const pageChange = (page) => {
  currentPage.value = page;
  logsData.value.pageNum = page;
  showLogsData();
};
</script>

<style scoped>
</style>